<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">

    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>

    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="script/docs.min.js"></script>

</head>
<body>
<ul style="padding-left:0px;" class="list-group">
    <!--<li class="list-group-item tree-closed" >-->
        <!--<a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>-->
    <!--</li>-->
    <li class="list-group-item">
        <span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>
        <ul style="margin-top:10px;">
            <li style="height:30px;">
                <a href="user.html" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
            </li>
            <li style="height:30px;">
                <a href="role.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
            </li>
            <li style="height:30px;">
                <a href="permission.html"><i class="glyphicon glyphicon-lock"></i> 许可维护</a>
            </li>
        </ul>
    </li>
    <li class="list-group-item tree-closed">
        <span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>
        <ul style="margin-top:10px;display:none;">
            <li style="height:30px;">
                <a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
            </li>
            <li style="height:30px;">
                <a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
            </li>
            <li style="height:30px;">
                <a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
            </li>
        </ul>
    </li>
    <li class="list-group-item tree-closed">
        <span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
        <ul style="margin-top:10px;display:none;">
            <li style="height:30px;">
                <a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
            </li>
            <li style="height:30px;">
                <a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
            </li>
            <li style="height:30px;">
                <a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
            </li>
            <li style="height:30px;">
                <a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
            </li>
            <li style="height:30px;">
                <a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
            </li>
            <li style="height:30px;">
                <a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
            </li>
            <li style="height:30px;">
                <a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
            </li>
        </ul>
    </li>
    <!--<li class="list-group-item tree-closed" >-->
        <!--<a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>-->
    <!--</li>-->
</ul>

<script>
    //将上面的假数据变成从数据库中查询出来的真数据
    $.ajax({
        //请求方式GET/POST
        type: "POST",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        //设置ajax为同步
        async:false,
        //接受数据类型
        dataType: "json",
        //请求地址
        url: "http://localhost:8080//initMenuList",
        //数据，json字符串
        data:JSON.stringify({
            "username":"王涛",
            "password":"123456"
        }),
        //请求成功
        success: function (result) {
            $(".list-group").html("");
            $(result).each(function(index,item){
                if(index==0){
                    var str =     "<li class=\"list-group-item \">";
                }
                else{
                    var str =     "<li class=\"list-group-item tree-closed\">";
                }

                str += "<span><i class=\"glyphicon glyphicon-th-large\"></i>"+item.menuName+"<span class=\"badge\" style=\"float:right\">"+item.childMenus.length+"</span></span>";
                str += "<ul style=\"margin-top:10px;\">"
                var childMenus = item.childMenus;
                $(childMenus).each(function(indexChild,itemChild){
                    str+="<li style=\"height:30px;\">";
                    str+=  "<a href="+itemChild.menuUrl+"><i class="+itemChild.menuIcon+"></i>"+itemChild.menuName+"</a>"
                    str+=  "</li>"
                });
                str +="</ul>";
                str +=     "</li>";
                $(".list-group").append(str);
            })
        },
        error: function (e) {
            console.log(e);
        }
    })

</script>
<script>
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });
</script>
</body>
</html>